<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=utf-8"
		 isELIgnored="false"%>
<%@ include file="/common/include/taglib.jsp"%>
<html>
<head>
	<meta charset="utf-8">
	<title>Basic Custom Example</title>
	<link href='../resource/fullcalendar-2.3.1/fullcalendar.css' rel='stylesheet' />
	<link href='../resource/fullcalendar-2.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
	<script src='../resource/fullcalendar-2.3.1/lib/moment.min.js'></script>
	<script src='../resource/fullcalendar-2.3.1/lib/jquery.min.js'></script>
	<script src='../resource/fullcalendar-2.3.1/lib/jquery-ui.custom.min.js'></script>
	<script src='../resource/fullcalendar-2.3.1/fullcalendar.min.js'></script>

		<script>
		/**
		 * 更新任务状态
		 */
		function updateWTRTask(id,start,end)
		{
			$.post("test.do?reqCode=updateWTRTask",
					{
						loginuserid:parent.userid,//developer用户ID
						status : 1,
						start : start+"",
						end : end+"",
						id : id
					},
					function(data,status){
//						alert("Data: " + data + "\nStatus: " + status);
					});
		}

		/**
		 *
		 **/
		function initCalendar(eventDataArr){
			$('#calendar').fullCalendar({
				header: {
					left: 'prev,next today',
					center: 'title',
					right: 'month'
				},
				editable: true,
				droppable: true, // this allows things to be dropped onto the calendar
				drop: function(date, jsEvent, ui) {
					// is the "remove after drop" checkbox checked?
//					console.info("droped="+$(this).html());
//					console.info("droped="+date);
//					console.info("droped="+$(this).attr("id")+";start date="+date+";日历时间=");
					console.info("drop 移动到 date="+date);
					updateWTRTask($(this).attr("id"),date,date);
					if ($('#drop-remove').is(':checked')) {
						// if so, remove the element from the "Draggable Events" list
						$(this).remove();
					}
				},
				eventDrop: function(event, delta, revertFunc) {

					//alert(event.title + " was dropped on " + event.start.format());
					var title = event.title;
					var titleIndex = title.indexOf("_");
					var id = title.substr(titleIndex+1);
//					console.info("拖动事件结束 id="+id+";title="+title+";start="+event.start+"end"+event.end);
					updateWTRTask(id,event.start,event.start);
//					if (!confirm("Are you sure about this change?")) {
//						revertFunc();
//					}
				},
				eventDragStop : function(event, jsEvent, ui, view){
					var title = event.title;
					var titleIndex = title.indexOf("_");
					var id = title.substr(titleIndex+1);
//					console.info("拖动事件结束 id="+id+";title="+title+";start="+event.start);
					updateWTRTask(id,event.start,event.start);
				},
				events: eventDataArr
			});
		}

			$(document).ready(function() {
			/* initialize the external events
			 -----------------------------------------------------------------*/

			var eventDataArr ;
				eventDataArr = [
					{
						title: 'All Day Event',
						start: '2014-06-01'
					},
					{
						title: 'Long Event',
						start: '2015-05-07',
						end: '2015-05-10'
					}
				]
			$.ajax({
				method: "POST",
				url: "./test.do?reqCode=listwtrjson",
				data:{loginuserid:parent.userid,
					status : 0},//developer用户ID
				datatype: "json",
				success:function(data) {
					var jsonarray= JSON.parse(data);
					for(var i=0;i<jsonarray.dataroot.length;i++){
						$("#h4Tasks").append("<div class='fc-event' id='"+jsonarray.dataroot[i].id+"'>"+jsonarray.dataroot[i].casename+"_"+jsonarray.dataroot[i].id+"</div>");
					}
					$('#external-events .fc-event').each(function() {
						// store data so the calendar knows to render an event upon drop
						$(this).data('event', {
							title: $.trim($(this).text()), // use the element's text as the event title
							stick: true // maintain when user navigates (see docs on the renderEvent method)
						});

						// make the event draggable using jQuery UI
						$(this).draggable({
							zIndex: 999,
							revert: true,      // will cause the event to go back to its
							revertDuration: 0  //  original position after the drag
						});

					});
				}
			});
				$.ajax({
					method: "POST",
					url: "test.do?reqCode=listwtrjson",
					data:{loginuserid:parent.userid,
						status : 1},//developer用户ID
					datatype: "json",
					success:function(data) {
						var jsonarray= JSON.parse(data);
						initCalendar(jsonarray.dataroot);
					}
				})
		});
	</script>
	<style>
		body {
			margin-top: 40px;
			text-align: center;
			font-size: 14px;
			font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}

		#wrap {
			width: 1100px;
			margin: 0 auto;
		}

		#external-events {
			float: left;
			width: 150px;
			padding: 0 10px;
			border: 1px solid #ccc;
			background: #eee;
			text-align: left;
		}

		#external-events h4 {
			font-size: 16px;
			margin-top: 0;
			padding-top: 1em;
		}

		#external-events .fc-event {
			margin: 10px 0;
			cursor: pointer;
		}

		#external-events p {
			margin: 1.5em 0;
			font-size: 11px;
			color: #666;
		}

		#external-events p input {
			margin: 0;
			vertical-align: middle;
		}

		#calendar {
			float: right;
			width: 900px;
		}

	</style>
</head>
<body>
<div id='wrap'>

	<div id='external-events'>
		<h4 id="h4Tasks">Tasks</h4>
		<p>
			<input type='checkbox' id='drop-remove' />
			<label for='drop-remove'>remove after drop</label>
		</p>
	</div>
	<div id='calendar'></div>
	<div style='clear:both'></div>
</div>
</body>
</html>
